<template>
    <div class="main">
        <keep-alive include='Find'>
            <router-view @getid="getId" :caninput="caninput"></router-view>
        </keep-alive>
        <index-search :caninput="caninput"></index-search>
        <index-player :songobj="songObj" @haveinput="haveInput"></index-player>
        <footer>
            <ul class="footer-ul">
                <li>
                    <router-link to="/Find">
                        <i class="icon iconfont icon-home"></i>
                        <p class="title">主页</p>
                    </router-link>
                </li>

                <li>
                    <router-link to="/Blog">
                        <i class="icon iconfont icon-radioguangbo"></i>
                        <p class="title">博客</p>
                    </router-link>
                </li>
                        
                <li>
                    <router-link to="/Seach">
                        <i class="icon iconfont icon-sousuo"></i>
                        <p class="title">发现</p>
                    </router-link>
                </li>
                
                <li>
                    <router-link to="/Follow">
                        <i class="icon iconfont icon-wodeguanzhu"></i>
                        <p class="title">关注</p>
                    </router-link>
                </li>
                        
                <li>
                    <router-link to="/My">
                        <i class="icon iconfont icon-TsurugiHina"></i>
                        <p class="title">个人主页</p>
                    </router-link>
                </li>
            </ul>
        </footer>
    </div>
    
</template>

<script>
import indexPlayer from '@/components/index-player.vue';
import indexSearch from '@/components/index-search.vue'
export default {
  components: { 
      indexPlayer,
      indexSearch
  },
    data(){
        return{
            songObj : {},
            caninput : true,
            time : null
        }
    },
    methods:{
        getId(obj){
            this.songObj = obj
        },
        haveInput(obj){
            this.caninput = obj.isFalse;
            clearTimeout(this.time)
            this.time = setTimeout(()=>{
                this.caninput = obj.isTrue
            },500)
        }
    }

}
</script>

<style lang="scss" scoped>
    .main {
        width: 100%;

        footer {
            width: 100%;
            background: rgba(0, 0, 0,.7);
            position: fixed;
            z-index: 99;
            bottom: 0rem;
            left: 0rem;
        }

    }

    .footer-ul {
        width: 100%;
        margin: auto;
        display: flex;
        max-width: 750px;
        min-width: 275px;


        >li {
            flex: 1;
            text-align: center;
            height: 4rem;

            >a {
                display: block;
                color: #ccc;
                text-decoration: none;
            }
            .icon {
                display: block;
                width: 100%;
                text-align: center;
                height: 3rem;
                line-height: 3rem;
                font-size: 1.5rem;
            }

            .title {
                width: 100%;
                text-align: center;
                height: 1rem;
                line-height: 1rem;
                font-size: 0.8rem;
            }

            .active {
                background-color: #33CCBB;
                color: #fff;
            }


        }
    }






</style>